// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import { NumberDivide, DateDiff, FormatnumberZero, Mover } from '@/function.js';
import Loading from '@/components/Loading/Loading';

// 视图插件
import {
  BackTop,
  Empty,
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
  notification,
} from 'antd';

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import PositionRuiStockSourceDetail from './PositionRuiStockSourceDetail';
import PositionRuiStockSourceAddDetail from './PositionRuiStockSourceAddDetail';

// css OR less预编译器
import styles from './PositionRuiStockSourceTable.less';

// 图片

// 算式

/**
 *  Created by xjc on 2019/5/15
 *  Describe:数据连接
 */

@connect(({ positionrui, loading }) => ({
  positionrui,
  loading: loading.models.positionruiRule,
}))
@Form.create()
class PositionRuiStockSourceTable extends PureComponent {
  componentWillMount() {}

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    selectedRows: [], // 选择行
    formValues: {
      num: 10,
      page: 1,
      stock: '', // 搜索内容
    }, // 表格参数
    StockSourceDetailVisible: false, // modal开关
    StockSourceAddDetailVisible: false, // modal开关
    record: {}, // 当前行内容
    columns: [], // 表头处理结果
  };

  /**
   *  Describe:改变每页条数和当前页
   *  Created by xjc on 2019/6/17
   */

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    this.setState(
      {
        formValues: {
          ...formValues,
          num: pagination.pageSize,
          page: pagination.current,
        }, // 表格参数
      },
      () => {
        /* 导入列表数据 */
        dispatch({
          type: 'positionrui/GetPositionSourceList',
          payload: this.state.formValues,
        });
      }
    );
  };

  /**
   *  Created by xjc on 2019/6/14
   *  Describe:读取筛选de表头
   */

  getColumns() {
    this.setState({
      columns: [
        {
          title: '股票',
          dataIndex: 'stock',
          sorter: (a, b) => {
            const c = [a.stock, b.stock].sort();
            if (c[0] === a.stock) {
              return 1;
            }
            return -1;
          },
        },
        {
          title: '归属方',
          dataIndex: 'sourceperson',
        },
        {
          title: '操作',
          render: (value, row, index) => (
            <div>
              <a onClick={this.changeRecord.bind(this, value)}>修改</a>
              <Divider type="vertical" />
              <a onClick={this.deleteRecord.bind(this, value)}>删除</a>
            </div>
          ),
        },
      ],
    });
  }

  closeRecord() {
    const { dispatch } = this.props;
    this.setState(
      {
        StockSourceDetailVisible: false,
        StockSourceAddDetailVisible: false,
      },
      () => {
        const { formValues } = this.state;
        /* re导入列表数据 */
        dispatch({
          type: 'positionrui/GetPositionSourceList',
          payload: formValues,
        });
      }
    );
  }

  changeRecord(record) {
    this.setState({
      record,
      StockSourceDetailVisible: true,
    });
  }

  deleteRecord(record) {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    const key = `open${Date.now()}`;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          /* 导入列表数据 */
          dispatch({
            type: 'positionrui/DeletePositionSource',
            payload: record.id,
            callback: () => {
              dispatch({
                type: 'positionrui/GetPositionSourceList',
                payload: formValues,
              });
            },
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否删除',
      btn,
      key,
      onClose: close,
    });
  }

  stock(e) {
    const { formValues } = this.state;
    this.setState({
      formValues: { ...formValues, stock: e.target.value },
    });
  }

  searchRecord() {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    /* 导入列表数据 */
    dispatch({
      type: 'positionrui/GetPositionSourceList',
      payload: formValues,
      callback: () => {
        dispatch({
          type: 'positionrui/GetPositionSourceList',
          payload: formValues,
        });
      },
    });
  }

  addRecord() {
    this.setState({
      StockSourceAddDetailVisible: true,
    });
  }

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:视图
   */

  render() {
    const {
      loading,
      positionrui: { stocksSource },
    } = this.props;
    const {
      listLoading,
      selectedRows,
      record,
      StockSourceDetailVisible,
      StockSourceAddDetailVisible,
      columns,
    } = this.state;
    if (columns.length === 0 && stocksSource.list.length !== 0) {
      this.getColumns();
    }
    return (
      <PageHeaderWrapper title="瑞银股票归属管理">
        <Card>
          <Row>
            <Col md={10} sm={24}>
              <span>股票代码：</span>
              <Input
                placeholder="搜索股票代码"
                style={{ width: '60%', margin: 8 }}
                onChange={this.stock.bind(this)}
              />
              <Button type="primary" style={{ margin: 8 }} onClick={this.searchRecord.bind(this)}>
                搜索
              </Button>
              <Button type="primary" style={{ margin: 8 }} onClick={this.addRecord.bind(this)}>
                添加
              </Button>
            </Col>
          </Row>
          <br />
          {stocksSource.list.length === 0 ? (
            <Loading time={2000} />
          ) : (
            <StandardTable
              selectedRows={selectedRows}
              loading={listLoading}
              data={stocksSource}
              columns={columns}
              style={{ tableLayout: 'fixed' }}
              className={styles.TableLayout}
              onChange={this.handleStandardTableChange}
              // rowKey="id"
            />
          )}
          <PositionRuiStockSourceDetail
            record={record}
            OptionDetailVisible={StockSourceDetailVisible}
            closeRecord={this.closeRecord.bind(this)}
          />{' '}
          <PositionRuiStockSourceAddDetail
            OptionDetailVisible={StockSourceAddDetailVisible}
            closeRecord={this.closeRecord.bind(this)}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    /* 导入列表数据 */
    dispatch({
      type: 'positionrui/GetPositionSourceList',
      payload: formValues,
    });
  }

  componentWillUnmount() {}
}

export default PositionRuiStockSourceTable;
